<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词连线练习</title>
    <style>
        /* 移动端适配的基础样式 */
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        .container {
            display: flex;
            justify-content: space-around;
            margin: 20px;
            flex-direction: row;
            gap: 10px;
            padding: 0 10px;
        }

        /* 移动端适配 */
        @media screen and (max-width: 768px) {
            .container {
                flex-direction: row;
                margin: 10px;
                padding: 0 5px;
            }
            .column {
                width: 33% !important;
            }
            .word-item {
                padding: 8px 5px;
                margin: 5px 2px;
                font-size: 12px;
                min-height: 36px;
            }
            .speaker-icon {
                padding: 8px;
                margin-left: 4px;
                font-size: 14px;
                min-width: 30px;
                min-height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .column {
            width: 30%;
        }
        .word-item {
            margin: 10px 0;
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: white;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 44px;
        }
        .word-item:hover {
            background-color: #f0f0f0;
        }
        .word-item.selected {
            background-color: #e3f2fd;
            border-color: #2196F3;
        }
        .word-item.matched {
            background-color: #e8f5e9 !important;
            border-color: #81c784 !important;
            cursor: not-allowed !important;
            opacity: 1 !important;
            color: #2e7d32 !important;
            pointer-events: none !important;
            box-shadow: none !important;
        }
        #resetBtn {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #resetBtn:hover {
            background-color: #d32f2f;
        }
        .speaker-icon {
            display: inline-block;
            margin-left: 8px;
            cursor: pointer;
            color: #2196F3;
            font-size: 16px;
            padding: 8px;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }
        
        .speaker-icon:hover {
            color: #1976D2;
        }
    </style>
</head>
<body>
    <audio id="tts-audio"></audio>
    <div class="container">
        <div class="column" id="englishColumn">
            <div class="word-item" data-word="divine">divine</div>
            <div class="word-item" data-word="the god of the Divine Farmer">the god of the "Divine Farmer"</div>
            <div class="word-item" data-word="farm">farm (v.)</div>
            <div class="word-item" data-word="because of">because of</div>
            <div class="word-item" data-word="survive">survive</div>
            <div class="word-item" data-word="starvation">starvation</div>
            <div class="word-item" data-word="gradually">gradually</div>
            <div class="word-item" data-word="develop">develop</div>
            <div class="word-item" data-word="agriculture">agriculture</div>
            <div class="word-item" data-word="even though">even though</div>
            <div class="word-item" data-word="no longer">no longer</div>
            <div class="word-item" data-word="in short supply">in short supply</div>
            <div class="word-item" data-word="receive">receive</div>
            <div class="word-item" data-word="medical">medical</div>
            <div class="word-item" data-word="treatment">treatment</div>
            <div class="word-item" data-word="medication">medication</div>
            <div class="word-item" data-word="scarce">scarce</div>
            <div class="word-item" data-word="Be worried about">Be worried about</div>
            <div class="word-item" data-word="believe">believe</div>
            <div class="word-item" data-word="He didn't believe in">He didn't believe in</div>
        </div>
        <div class="column" id="phoneticColumn">
            <div class="word-item" data-word="[dɪˈvaɪn]">/dɪˈvaɪn/</div>
            <div class="word-item" data-word="[ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə]">/ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə/</div>
            <div class="word-item" data-word="[fɑːm]">/fɑːm/</div>
            <div class="word-item" data-word="[bɪˈkɒz ɒv]">/bɪˈkɒz ɒv/</div>
            <div class="word-item" data-word="[səˈvaɪv]">/səˈvaɪv/</div>
            <div class="word-item" data-word="[stɑːˈveɪʃn]">/stɑːˈveɪʃn/</div>
            <div class="word-item" data-word="[ˈɡrædʒuəli]">/ˈɡrædʒuəli/</div>
            <div class="word-item" data-word="[dɪˈveləp]">/dɪˈveləp/</div>
            <div class="word-item" data-word="[ˈæɡrɪkʌltʃə]">/ˈæɡrɪkʌltʃə/</div>
            <div class="word-item" data-word="[ˈiːvn ðəʊ]">/ˈiːvn ðəʊ/</div>
            <div class="word-item" data-word="[nəʊ ˈlɒŋɡə]">/nəʊ ˈlɒŋɡə/</div>
            <div class="word-item" data-word="[ɪn ʃɔːt səˈplaɪ]">/ɪn ʃɔːt səˈplaɪ/</div>
            <div class="word-item" data-word="[rɪˈsiːv]">/rɪˈsiːv/</div>
            <div class="word-item" data-word="[ˈmedɪkl]">/ˈmedɪkl/</div>
            <div class="word-item" data-word="[ˈtriːtmənt]">/ˈtriːtmənt/</div>
            <div class="word-item" data-word="[ˌmedɪˈkeɪʃn]">/ˌmedɪˈkeɪʃn/</div>
            <div class="word-item" data-word="[skeə]">/skeə/</div>
            <div class="word-item" data-word="[bi ˈwʌrid əˈbaʊt]">/bi ˈwʌrid əˈbaʊt/</div>
            <div class="word-item" data-word="[bɪˈliːv]">/bɪˈliːv/</div>
            <div class="word-item" data-word="[hi dɪdnt bɪˈliːv ɪn]">/hi dɪdnt bɪˈliːv ɪn/</div>
        </div>
        <div class="column" id="chineseColumn">
            <div class="word-item" data-word="神的">神的</div>
            <div class="word-item" data-word="神农帝">神农帝</div>
            <div class="word-item" data-word="种田">种田</div>
            <div class="word-item" data-word="由于">由于</div>
            <div class="word-item" data-word="生存">生存</div>
            <div class="word-item" data-word="饥饿">饥饿</div>
            <div class="word-item" data-word="逐渐地">逐渐地</div>
            <div class="word-item" data-word="发展">发展</div>
            <div class="word-item" data-word="农业">农业</div>
            <div class="word-item" data-word="即使">即使</div>
            <div class="word-item" data-word="不再">不再</div>
            <div class="word-item" data-word="供应不足">供应不足</div>
            <div class="word-item" data-word="收到">收到</div>
            <div class="word-item" data-word="医学的">医学的</div>
            <div class="word-item" data-word="治疗">治疗</div>
            <div class="word-item" data-word="药物">药</div>
            <div class="word-item" data-word="缺乏的">缺乏的</div>
            <div class="word-item" data-word="担心">担心</div>
            <div class="word-item" data-word="相信">相信</div>
            <div class="word-item" data-word="他不相信">他不相信</div>
        </div>
    </div>
    <button id="resetBtn">重置</button>

    <script>
        const answers = {
            'divine': ['/dɪˈvaɪn/', '神的'],
            'the god of the Divine Farmer': ['/ðə ɡɒd ɒv ðə dɪˈvaɪn ˈfɑːmə/', '神农帝'],
            'farm': ['/fɑːm/', '种田'],
            'because of': ['/bɪˈkɒz ɒv/', '由于'],
            'survive': ['/səˈvaɪv/', '生存'],
            'starvation': ['/stɑːˈveɪʃn/', '饥饿'],
            'gradually': ['/ˈɡrædʒuəli/', '逐渐地'],
            'develop': ['/dɪˈveləp/', '发展'],
            'agriculture': ['/ˈæɡrɪkʌltʃə/', '农业'],
            'even though': ['/ˈiːvn ðəʊ/', '即使'],
            'no longer': ['/nəʊ ˈlɒŋɡə/', '不再'],
            'in short supply': ['/ɪn ʃɔːt səˈplaɪ/', '供应不足'],
            'receive': ['/rɪˈsiːv/', '收到'],
            'medical': ['/ˈmedɪkl/', '医学的'],
            'treatment': ['/ˈtriːtmənt/', '治疗'],
            'medication': ['/ˌmedɪˈkeɪʃn/', '药物'],
            'scarce': ['/skeə/', '缺乏的'],
            'Be worried about': ['/bi ˈwʌrid əˈbaʊt/', '担心'],
            'believe': ['/bɪˈliːv/', '相信'],
            'He didn\'t believe in': ['/hi dɪdnt bɪˈliːv ɪn/', '他不相信']
        };

        let selectedItems = {
            english: null,
            phonetic: null,
            chinese: null
        };

        document.querySelectorAll('.word-item').forEach(item => {
            if (!item.classList.contains('matched')) {
                item.addEventListener('click', handleItemClick);
            }
        });

        function handleItemClick(e) {
            const item = e.target;
            if (item.classList.contains('matched')) {
                return;
            }

            const column = item.parentElement.id;
            const columnType = column.replace('Column', '');

            // 如果是音标列，自动发音
            if (columnType === 'phonetic') {
                const phoneticWord = item.dataset.word.replace('[', '/').replace(']', '/');
                for (const [key, value] of Object.entries(answers)) {
                    if (value[0] === phoneticWord) {
                        speak(key.replace(/["']/g, ''));
                        break;
                    }
                }
            }

            // 取消同列其他选中项
            document.querySelectorAll(`#${column} .word-item`).forEach(el => {
                if (el !== item) {
                    el.classList.remove('selected');
                }
            });

            // 切换项的选中状态
            item.classList.toggle('selected');
            selectedItems[columnType] = item.classList.contains('selected') ? item : null;

            // 检查是否匹配
            checkMatch();
        }

        function checkMatch() {
            if (selectedItems.english && selectedItems.phonetic && selectedItems.chinese) {
                const englishWord = selectedItems.english.dataset.word;
                const phoneticWord = selectedItems.phonetic.dataset.word.replace('[', '/').replace(']', '/');
                const chineseWord = selectedItems.chinese.dataset.word;

                // 检查是否为正确的匹配组合
                if (answers[englishWord] && 
                    answers[englishWord][0] === phoneticWord && 
                    answers[englishWord][1] === chineseWord) {
                    // ���配成功，先移除选中状态
                    [selectedItems.english, selectedItems.phonetic, selectedItems.chinese].forEach(item => {
                        item.classList.remove('selected');
                        item.classList.add('matched');
                    });
                    
                    // 移除事件监听器
                    selectedItems.english.removeEventListener('click', handleItemClick);
                    selectedItems.phonetic.removeEventListener('click', handleItemClick);
                    selectedItems.chinese.removeEventListener('click', handleItemClick);

                    // 检查是否所有单词都匹配成功
                    const unmatchedItems = document.querySelectorAll('.word-item:not(.matched)');
                    if (unmatchedItems.length === 0) {
                        // 创建庆祝提示
                        const celebration = document.createElement('div');
                        celebration.textContent = '🎉 恭喜！你已完所有单词的匹配！';
                        celebration.style.cssText = `
                            position: fixed;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background-color: rgba(76, 175, 80, 0.9);
                            color: white;
                            padding: 20px 40px;
                            border-radius: 8px;
                            font-size: 18px;
                            z-index: 1000;
                            text-align: center;
                        `;
                        document.body.appendChild(celebration);
                        setTimeout(() => celebration.remove(), 3000);
                    }
                } else {
                    // ��示匹配失败提示
                    const tip = document.createElement('div');
                    tip.textContent = '匹配不正确，请重试';
                    tip.style.cssText = `
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-color: rgba(244, 67, 54, 0.9);
                        color: white;
                        padding: 10px 20px;
                        border-radius: 4px;
                        z-index: 1000;
                    `;
                    document.body.appendChild(tip);
                    setTimeout(() => tip.remove(), 1500);

                    // 只需要移除选中状态，不添加错误样式
                    selectedItems.english.classList.remove('selected');
                    selectedItems.phonetic.classList.remove('selected');
                    selectedItems.chinese.classList.remove('selected');
                }

                // 重置选中状态
                selectedItems = {
                    english: null,
                    phonetic: null,
                    chinese: null
                };
            }
        }

        // 添加随机排序函数
        function shuffleChildren(parent) {
            const children = Array.from(parent.children);
            for (let i = children.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                parent.appendChild(children[j]);
            }
        }

        // 页面加载时随机排序
        window.addEventListener('load', () => {
            const columns = document.querySelectorAll('.column');
            columns.forEach(column => shuffleChildren(column));
        });

        // 重置按钮也要随机排序
        document.getElementById('resetBtn').addEventListener('click', () => {
            document.querySelectorAll('.word-item').forEach(item => {
                item.classList.remove('matched', 'selected');
                item.addEventListener('click', handleItemClick);
            });
            selectedItems = {
                english: null,
                phonetic: null,
                chinese: null
            };
            // 重新随机排序
            const columns = document.querySelectorAll('.column');
            columns.forEach(column => shuffleChildren(column));
        });

        // 创建发音函数
        function speak(text) {
            try {
                // 确保语音合成已初始化
                if (!window.speechSynthesis) {
                    console.error('Speech synthesis not supported');
                    return;
                }
                
                // 移除音标中的方括号和其他特殊字符
                const cleanText = text.replace(/[\[\]]/g, '').replace(/ˈ|ˌ/g, '');
                
                // 取消所有正在进行的发音
                window.speechSynthesis.cancel();
                
                // 创建新的发音请求
                const utterance = new SpeechSynthesisUtterance(cleanText);
                utterance.lang = 'en-US';
                utterance.rate = 0.8;
                utterance.volume = 1;
                
                // 添加错误处理
                utterance.onerror = (event) => {
                    console.error('Speech synthesis error:', event);
                };
                
                // 尝试播放
                window.speechSynthesis.speak(utterance);
            } catch (error) {
                console.error('Speech synthesis error:', error);
            }
        }

        // 在页面加载时初始化语音合成
        window.addEventListener('load', () => {
            // 触发一个静音的语音合成来初始化系统
            const silence = new SpeechSynthesisUtterance('');
            silence.volume = 0;
            window.speechSynthesis.speak(silence);
        });

        // 为所有音标添加喇叭图标和发音功能
        document.querySelectorAll('#phoneticColumn .word-item').forEach(item => {
            // 根据音标找到对应英语单词
            const phoneticWord = item.dataset.word.replace('[', '/').replace(']', '/');
            let englishWord = '';
            for (const [key, value] of Object.entries(answers)) {
                if (value[0] === phoneticWord) {
                    englishWord = key.replace(/["']/g, '');
                    break;
                }
            }

            const phoneticText = item.textContent;
            item.innerHTML = `
                ${phoneticText}
                <span class="speaker-icon" data-speak="${englishWord}">
                    🔊
                </span>
            `;
        });

        // 为喇叭图标添加点击事件监听器
        document.addEventListener('click', function(e) {
            if (e.target.closest('.speaker-icon')) {
                e.stopPropagation();
                const speakText = e.target.closest('.speaker-icon').dataset.speak;
                speak(speakText);
            }
        });
    </script>
</body>
</html> 